import { FilePptOutlined } from '@ant-design/icons';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Badge, Image, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { getRecordDetail } from '../service';
import type { details } from '../types';

interface detailProps {
  id?: string;
  visible: boolean;
  onClose: () => void;
}

export default (props: detailProps) => {
  const [outPlateVisible, setOutPlateVisible] = useState(false);
  const [outImageVisible, setOutImageVisible] = useState(false);
  const [detailItem, setDetailItem] = useState<details>();
  const [spinVisible, setSpinVisible] = useState(false);
  const { id, visible, onClose } = props;

  const channelType = new Map().set(3, '出口不收费').set(2, '出口收费').set(1, '入口').set(0, '');
  const carType_MAP = new Map().set(3, '新能源车').set(2, '大型车').set(1, '小型车');
  const carAttributes_MAP = new Map()
    .set(1, '固定车')
    .set(2, '会员车')
    .set(3, '无牌车')
    .set(4, '临时车');

  useEffect(() => {
    if (id) {
      setSpinVisible(true);
      getRecordDetail(id).then((res) => {
        if (res) {
          setDetailItem(res.data);
          setSpinVisible(false);
        }
      });
    }
  }, []);
  return (
    <Modal open={visible} width="850px" onCancel={onClose} title="记录详情" footer={null}>
      <Spin spinning={spinVisible}>
        <div style={{ marginLeft: 23 }}>
          <FilePptOutlined style={{ fontSize: 20 }} />
          <span style={{ fontWeight: 700, fontSize: 16, marginLeft: 10 }}>
            记录编号：{detailItem?.id}
          </span>
        </div>
        <ProCard direction="column" gutter={[0, 16]} style={{ marginBlockStart: 8 }}>
          <ProCard title="基础信息" bordered type="inner" style={{ marginBottom: 20 }}>
            <ProDescriptions column={2}>
              <ProDescriptions.Item label="停车场名称">{detailItem?.zoneName}</ProDescriptions.Item>
              <ProDescriptions.Item label="车牌颜色">{detailItem?.plateColor}</ProDescriptions.Item>
              <ProDescriptions.Item label="车牌号码">
                {detailItem?.plateNumber}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="车辆属性">
                {carAttributes_MAP.get(detailItem?.carAttributes)}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="车辆类型">
                {carType_MAP.get(detailItem?.carType)}
              </ProDescriptions.Item>
            </ProDescriptions>
          </ProCard>
          <ProCard title="详细信息" bordered type="inner" style={{ marginBottom: 20 }}>
            <ProDescriptions column={2}>
              <ProDescriptions.Item label="通道类型">
                {channelType.get(detailItem?.channelType)}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="放行方式">
                {detailItem?.releaseMode == 1 ? (
                  <Badge key={'green'} color={'green'} text={'正常放行'} />
                ) : detailItem?.releaseMode == 2 ? (
                  <Badge key={'red'} color={'red'} text={'软件异常放行'} />
                ) : (
                  <Badge key={'yellow'} color={'yellow'} text={'遥控或遥感放行'} />
                )}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="通道名称">
                {detailItem?.channelName}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="过车车牌">
                {detailItem?.plateImageUrl && (
                  <>
                    <a onClick={() => setOutPlateVisible(true)}>查看车牌</a>
                    <Image
                      width={200}
                      style={{ display: 'none' }}
                      preview={{
                        visible: outPlateVisible,
                        src: detailItem?.plateImageUrl,
                        onVisibleChange: (value) => {
                          setOutPlateVisible(value);
                        },
                      }}
                    />
                  </>
                )}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="过车时间">{detailItem?.passTime}</ProDescriptions.Item>
              <ProDescriptions.Item label="过车图片">
                {detailItem?.imageUrl && (
                  <>
                    <a onClick={() => setOutImageVisible(true)}>查看图片</a>
                    <Image
                      width={200}
                      style={{ display: 'none' }}
                      preview={{
                        visible: outImageVisible,
                        src: detailItem?.imageUrl,
                        onVisibleChange: (value) => {
                          setOutImageVisible(value);
                        },
                      }}
                    />
                  </>
                )}
              </ProDescriptions.Item>
            </ProDescriptions>
          </ProCard>
        </ProCard>
      </Spin>
    </Modal>
  );
};
